<template>

    <div class="roo">
        <div class="search-area">
        <input class="search-area-input" 
            :v-model="searchInput" 
            v-on:focus="isfocus"
            v-on:focusout="isSearchInputFocus=false"
            v-model="inputValue"
            @input="handleInput"
            @focus="showSuggestions = true"
            @blur="onBlur"
            @keydown.down="highlightNext"
            @keydown.up="highlightPrev"
            @keydown.enter="selectSuggestion"
            placeholder="搜索..."
        />
        <ul v-show="showSuggestions && filteredSuggestions.length" class="suggestions-list">
            <!-- <span>搜索历史</span>
            <li :class="{ 'highlighted': index === highlightedIndex }">水水水水水</li> -->
            <el-scrollbar height="400px">
             <li
              v-for="(suggestion, index) in filteredSuggestions"
              :key="suggestion"
              @mousedown="selectSuggestion(suggestion)"
              :class="{ 'highlighted': index === highlightedIndex }"
              >
              {{ suggestion }}
              </li>
            </el-scrollbar>
            
        </ul>
        <!-- <div v-if="isSearchInputFocus" class="shear-recommend-area">
        </div> -->
        <!-- <img :src="server_baseUrl+'/images/cream.png'" style="width: 20px;height: 20px;"> -->
        <el-divider direction="vertical" />
        <el-button color="#626aef" @click="serchBut">搜索</el-button>
    </div>
    </div>
</template>

<script setup lang="js">
// import {server_baseUrl} from '../../config'
import { ref, computed, watch } from 'vue'
// import { useRouter } from 'vue-router'
// const router = useRouter()
  
  const props = defineProps({
    suggestions: {
      type: Array,
      default: () => ['小米13Ultra','粽子', '钢笔', '积木', '小米空气净化器', '无线路由器']
    }
  })
  
  const inputValue = ref('')
  const showSuggestions = ref(false)
  const highlightedIndex = ref(-1)
  
  // 过滤建议列表
  const filteredSuggestions = computed(() => {
    if (!inputValue.value) return props.suggestions
    return props.suggestions.filter(item =>
      item.toLowerCase().includes(inputValue.value.toLowerCase())
    )
  })
  
  // 输入处理
  const handleInput = () => {
    highlightedIndex.value = -1
  }
  
  // 选择建议项
  const selectSuggestion = (suggestion) => {
    if (suggestion) {
      inputValue.value = suggestion
    } else if (highlightedIndex.value > -1) {
      inputValue.value = filteredSuggestions.value[highlightedIndex.value]
    }
    showSuggestions.value = false
  }
  
  // 处理失焦事件（带延迟防止点击失效）
  const onBlur = () => {
    setTimeout(() => {
      showSuggestions.value = false
    }, 200)
  }
  
  // 键盘导航
  const highlightNext = () => {
    if (highlightedIndex.value < filteredSuggestions.value.length - 1) {
      highlightedIndex.value++
    }
  }
  
  const highlightPrev = () => {
    if (highlightedIndex.value > 0) {
      highlightedIndex.value--
    }
  }


  function serchBut(){
    // router.push('/commodityDetail');
    console.log("【点击了搜索】")
  }
  
  // 监听输入值变化
  watch(inputValue, (newVal) => {
    if (newVal === '') {
      showSuggestions.value = true
    }
  })

</script>

<style lang="scss" scoped>

@import '../../assets/theme.scss';
.roo{
    width: 100%;
    height: 100%;
    background-color: #6929ff;
    padding: 50px;
}

.search-area{
    
    width: max-content;
    height: 40px;
    padding: 0px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    // padding-left: 10px;
    margin-left: 100px;
    
    background-color: #ffffff;

    

    .search-area-input{
        height: 35px;
        width: 525px;
        font-size: 15px;
        outline: none;
        border: 0;
        margin-left: 10px;
        background-color: #ffffff;
    }

    //推荐搜索区域
    .shear-recommend-area{
        position: fixed;
        top:20px;
        // border-left: 1px solid rebeccapurple;
        border-radius: 0 0 5px 5px; 

        width: 640px;
        height: 200px;
        background-color: #ffffff;
    }
    .suggestions-list {
      position: absolute;
      top:100px;
      width: 640px;
      max-height: 400px;
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      overflow-y: auto;
      z-index: 1000;
  
      li {
        padding: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
  
        &:hover,
        &.highlighted {
          background: #f5f7fa;
          color: $theme-decorate-color;
        }
  
        &:not(:last-child) {
          border-bottom: 1px solid #f0f0f0;
        }
      }
    }
}  
 
.search-icon{
    border:0;
    background-color: #ffffff00;

}

.el-input{
    .el-input__wrapper .is-focus{
        outline: none !important;
        border: 0 !important;
        box-shadow:none !important;
    }
}




</style>